import React, { Component } from 'react'

import FilterFooter from '../../../../components/FilterFooter'

import styles from './index.module.css'

export default class FilterMore extends Component {

  state = {
    selectValue: this.props.defaultValue
  }


  onOK = () => {
    const { type, onSave } = this.props
    onSave(type, this.state.selectValue)
  }

  // 清除
  onCancel = () => {
    this.setState({
      selectValue: []
    })
  }

  myClick = (val) => {
    const { selectValue } = this.state
    const newSelectValue = [...selectValue]

    const index = selectValue.findIndex(item => item === val)
    if (index <= -1) {
      newSelectValue.push(val)
    } else {
      newSelectValue.splice(index, 1)
    }

    this.setState({
      selectValue: newSelectValue
    })


  }


  // 渲染标签
  renderFilters(data) {
    // 高亮类名： styles.tagActive
    const { selectValue } = this.state
    return data.map(item => {
      const isSelected = selectValue.indexOf(item.value) > -1
      return (
        <span key={item.value} className={[styles.tag, isSelected ? styles.tagActive : ''].join(" ")} onClick={() => { this.myClick(item.value) }}>{item.label}</span>
      );
    });
  }

  render() {
    const {
      data: { roomType, oriented, floor, characteristic }, onCancle, type
    } = this.props;
    return (
      <div className={styles.root}>
        {/* 遮罩层 */}
        <div className={styles.mask} onClick={() => { onCancle(type) }} />

        {/* 条件内容 */}
        <div className={styles.tags}>
          <dl className={styles.dl}>
            <dt className={styles.dt}>户型</dt>
            <dd className={styles.dd}>{this.renderFilters(roomType)}</dd>

            <dt className={styles.dt}>朝向</dt>
            <dd className={styles.dd}>{this.renderFilters(oriented)}</dd>

            <dt className={styles.dt}>楼层</dt>
            <dd className={styles.dd}>{this.renderFilters(floor)}</dd>

            <dt className={styles.dt}>房屋亮点</dt>
            <dd className={styles.dd}>{this.renderFilters(characteristic)}</dd>
          </dl>
        </div>

        {/* 底部按钮       */}
        <FilterFooter className={styles.footer} cancelText="清除" onCancel={this.onCancel} onOk={this.onOK} />

      </div>
    )
  }
}
